<!DOCTYPE html>
<!--
BeyondAdmin - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.4
Version: 1.4
Purchase: http://wrapbootstrap.com
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Head -->

<!-- Mirrored from beyondadmin-v1.4.s3-website-us-east-1.amazonaws.com/tabs.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 07 May 2015 08:27:26 GMT -->
<head>
    <meta charset="utf-8" />
    <title>亿阳安全态势感知平台</title>

    <meta name="description" content="tabs and accordions" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

    <!--Basic Styles-->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
    <link id="bootstrap-rtl-link" href="#" rel="stylesheet" />
    <link href="assets/css/font-awesome.min.css" rel="stylesheet" />
    <link href="assets/css/weather-icons.min.css" rel="stylesheet" />

    <!--Beyond styles-->
    <link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" />
    <link href="assets/css/demo.min.css" rel="stylesheet" />
    <link href="assets/css/typicons.min.css" rel="stylesheet" />
    <link href="assets/css/animate.min.css" rel="stylesheet" />
    <link id="skin-link" href="#" rel="stylesheet" type="text/css" />

    <!--Page Related styles-->
    <link href="assets/css/dataTables.bootstrap.css" rel="stylesheet" />


    <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
    <script src="assets/js/skins.min.js"></script>
    <!--gridster-->
    <link rel="stylesheet" type="text/css" href="css/jquery.gridster.min.css">
    <!--Basic Scripts-->

    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/slimscroll/jquery.slimscroll.min.js"></script>

    <script src="js/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
    <script src="assets/js/fuelux/wizard/wizard-custom.js"></script>
    <script src="assets/js/toastr/toastr.js"></script>

    <!--Bootstrap Date Picker-->
    <script src="assets/js/datetime/bootstrap-datepicker.js"></script>

    <!--Bootstrap Time Picker-->
    <script src="assets/js/datetime/bootstrap-timepicker.js"></script>

    <!--Bootstrap Date Range Picker-->
    <script src="assets/js/datetime/moment.js"></script>
    <script src="assets/js/datetime/daterangepicker.js"></script>



</head>
<!-- /Head -->
<!-- Body -->
<body>
<!-- Loading Container -->
<!--<div class="loading-container">
    <div class="loader"></div>
</div>-->
<!--  /Loading Container -->
<!-- Navbar -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="navbar-container">
            <!-- Navbar Barnd -->
            <div class="navbar-header pull-left">
                <a href="#" class="navbar-brand">
                    <small>
                       &nbsp; <font color="#FFFFFF" size="4" face="华文行楷">安全合规管理平台</font>
                        <!--<img src="assets/img/logo.png" alt="" />-->
                    </small>
                </a>
            </div>
            <!-- /Navbar Barnd -->
            <!-- Sidebar Collapse -->
            <div class="sidebar-collapse" id="sidebar-collapse">
                <i class="collapse-icon fa fa-bars"></i>
            </div>
            <!-- /Sidebar Collapse -->
            <!-- Account Area and Settings --->
            <div class="navbar-header pull-right">
                <div class="navbar-account">
                    <ul class="account-area">
                        <li>
                            <a class="login-area dropdown-toggle" data-toggle="dropdown">
                                <div class="avatar" title="View your public profile">
                                    <img src="assets/img/avatars/adam-jansen.jpg">
                                </div>
                                <section>
                                    <h2><span class="profile"><span>bocoadmin</span></span></h2>
                                </section>
                            </a>
                            <!--Login Area Dropdown-->
                            <ul class="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
                                <li class="username"><a>bocoadmin</a></li>
                                <!--Avatar Area-->
                                <li>
                                    <div class="avatar-area">
                                        <img src="assets/img/avatars/adam-jansen.jpg" class="avatar">
                                        <span class="caption">Change Photo</span>
                                    </div>
                                </li>
                                <!--Avatar Area-->
                                <li class="edit">
                                    <a href="profile.html" class="pull-left">Profile</a>
                                    <a href="#" class="pull-right">Setting</a>
                                </li>
                                <!--/Theme Selector Area-->
                                <li class="dropdown-footer">
                                    <a href="login.html">
                                        Sign out
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /Account Area and Settings -->
        </div>
    </div>
</div>
<!-- /Navbar -->
<!-- Main Container -->
<div class="main-container container-fluid">
    <!-- Page Container -->
    <div class="page-container">
        <!-- 导航栏开始 -->
        <div class="page-sidebar" id="sidebar">
            <ul class="nav sidebar-menu">
                <!--Dashboard-->
                <!-- 首页 -->
                <li>
                    <a href="#">
                        <i class="menu-icon glyphicon glyphicon-home"></i>
                        <span class="menu-text">门户首页</span>
                    </a>
                </li>
                <!-- 首页结束 -->
                <!-- 个人事务 -->
                <li>
                    <a href="#"  class="menu-dropdown">
                        <i class="menu-icon glyphicon glyphicon-tasks"></i>  <!-- 弄一个图案 -->
                        <span class="menu-text"> 个人事务 </span>
                        <i class="menu-expand"></i>
                    </a>
                    <ul class="submenu">
                        <li>
                            <a href="指标预警呈现.html">
                                <span class="menu-text">已办</span>
                            </a>
                        </li>
                        <li>
                            <a href="指标预警呈现.html">
                                <span class="menu-text">待办</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <!-- 个人事务结束 -->
                <!--流程管理-->
                <li>
                    <a href="#"  class="menu-dropdown">
                        <i class="menu-icon fa fa-pencil-square-o"></i>
                        <span class="menu-text"> 流程管理 </span>
                        <i class="menu-expand"></i>
                    </a>
                    <ul class="submenu">
                        <!-- 日常安全巡检  -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">日常安全巡检</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">第三方安全态势检测</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">集团专项抽测</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">漏洞数据维护</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">日常安全扫描</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- 日常安全巡检结束 -->
                        <!-- 两部委考核指标 -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">两部委考核指标</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">两部委考核流程</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- 两部委考核指标结束 -->
                        <!-- 三同步 -->
                        <li>
                            <a href="#">
                                <span class="menu-text">三同步</span>
                            </a>
                        </li>
                        <!-- 三同步结束 -->
                        <!-- 风险应急处理平台 -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">风险应急处理平台</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">我处理的漏洞</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">我的积分</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- 风险应急处理平台结束 -->
                        <!-- 新技术新业务 -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">新技术新业务</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">新技术新业务评估流程</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- 新结束新业务结束 -->
                    </ul>
                </li>
                <!-- 流程管理结束 -->
                <!--制度管理-->
                <li>
                    <a href="#"  class="menu-dropdown">
                        <i class="menu-icon fa fa-table"></i>
                        <span class="menu-text">制度管理</span>
                        <i class="menu-expand"></i>
                    </a>
                    <ul class="submenu">
                        <!-- 制度统计 -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">制度统计</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">内部制度统计</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">制度变更记录</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- 制度统计结束 -->
                        <!-- 制度查询 -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">制度查询</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">内部制度</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">外部规范</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">差异分析</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- 制度查询结束 -->
                        <!--制度维护 -->
                        <li>
                            <a href="#">
                                <span class="menu-text">制度维护</span>
                            </a>
                        </li>
                        <!-- 制度维护结束 -->
                    </ul>
                </li>
                <!-- 制度管理结束 -->
                <!--矩阵管理-->
                <li>
                    <a href="#" class="menu-dropdown">
                        <i class="menu-icon fa fa-th"></i>
                        <span class="menu-text"> 矩阵管理 </span>
                        <i class="menu-expand"></i>
                    </a>
                    <ul class="submenu">
                        <!-- 矩阵统计 -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">矩阵统计</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">控制矩阵统计</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- 矩阵统计结束 -->
                        <!-- 矩阵查询 -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">矩阵查询</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">控制矩阵查询</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">检查矩阵查询</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">个人控制点列表</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">个人检查点列表</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- 矩阵查询结束 -->
                    </ul>
                </li>
                <!-- 矩阵管理结束 -->
                <!-- 系统管理 -->
                <li>
                    <a href="#" class="menu-dropdown">
                        <i class="menu-icon fa fa-desktop"></i>
                        <span class="menu-text"> 系统管理 </span>
                        <i class="menu-expand"></i>
                    </a>
                    <ul class="submenu">
                        <!-- 文档管理 -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">文档管理</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">文档查询</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- 文档管理结束 -->
                        <!-- 公告管理 -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">公告管理</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">公告查询</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">公告发布</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <!-- 公告管理结束 -->
                        <!-- 用户管理 -->
                        <li>
                            <a href="#" class="menu-dropdown">
                                <span class="menu-text">用户管理</span>
                                <i class="menu-expand"></i>
                            </a>
                            <ul class="submenu">
                                <li>
                                    <a href="#">
                                        <span class="menu-text">权限管理</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">角色管理</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">用户管理</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="menu-text">组织结构管理</span>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!--系统管理结束-->
            </ul>
        </div>
        <!-- 导航栏结束 -->

        <!-- Page Content -->
        <div class="page-content">
            <!-- Page Header -->
            <div class="page-header " style="padding-left:0px">
                <div class="page-breadcrumbs">
                    <ul class="breadcrumb">
                        <li>
                            <i class="fa fa-home"></i>
                            <a href="#">门户首页</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- Page Header End -->
            <!-- Page Body -->
            <div class="page-body">
                <div class="row">
                    <div class="col-lg-12 col-sm-12 col-xs-12">
                        <div class="row">
                            <!-- gridster渲染区域 -->
                            <div class="gridster">
                                <ul>
                                    <li style="list-style-type:none;" div_id="chart_1" data-col='1' data-row='1' data-sizex="1" data-sizey="1">
                                        <div class="widget-header bg-blue"><span class="widget-caption">&nbsp;&nbsp;       每万用户等效MO垃圾短信量</span>
                                            <div class="widget-buttons">
                                                <a href="#" data-toggle="config"><i class="fa fa-cog"></i></a>&nbsp;&nbsp;
                                                <a href="javascript:remove_obj('chart_1')" data-toggle="dispose"><i class="fa fa-times"></i></a>&nbsp;&nbsp;
                                            </div></div>
                                        <div id="chart_1" class="div_cls"></div>
                                    </li>
                                    <li style="list-style-type:none;" div_id="chart_2" data-col='2' data-row='1' data-sizex="1" data-sizey="1" >
                                        <div class="widget-header bg-blue"><span class="widget-caption">&nbsp;&nbsp;    工信部12321点对点垃圾短信被举报量   </span>
                                            <div class="widget-buttons">
                                                <a href="#" data-toggle="config"><i class="fa fa-cog"></i></a>&nbsp;&nbsp;
                                                <a href="javascript:remove_obj('chart_2')" data-toggle="dispose"><i class="fa fa-times"></i></a>&nbsp;&nbsp;
                                            </div></div>
                                        <div id="chart_2" class="div_cls"></div>
                                    </li>
                                    <li style="list-style-type:none;" div_id="chart_3" data-col='3' data-row='1' data-sizex="1" data-sizey="1">
                                        <div class="widget-header bg-blue"><span class="widget-caption">&nbsp;&nbsp;       垃圾短彩信投诉处理</span>
                                            <div class="widget-buttons">
                                                <a href="#" data-toggle="config"><i class="fa fa-cog"></i></a>&nbsp;&nbsp;
                                                <a href="javascript:remove_obj('chart_3')" data-toggle="dispose"><i class="fa fa-times"></i></a>&nbsp;&nbsp;
                                            </div></div>
                                        <div id="chart_3" class="div_cls"></div>
                                    </li>
                                    <li style="list-style-type:none;" div_id="chart_4" data-col='1' data-row='2' data-sizex="1" data-sizey="1" >
                                        <div class="widget-header bg-blue"><span class="widget-caption">&nbsp;&nbsp;       考核指标预警</span>
                                            <div class="widget-buttons">
                                                <a href="#" data-toggle="config"><i class="fa fa-cog"></i></a>&nbsp;&nbsp;
                                                <a href="javascript:remove_obj('chart_4')" data-toggle="dispose"><i class="fa fa-times"></i></a>&nbsp;&nbsp;
                                            </div></div>
                                        <div id="chart_4" class="div_cls"></div>
                                    </li>
                                    <li style="list-style-type:none;" div_id="chart_5" data-col='1' data-row='2' data-sizex="1" data-sizey="1" >
                                        <div class="widget-header bg-blue"><span class="widget-caption">&nbsp;&nbsp;             每万等效MO垃圾短信指标偏离度</span>
                                            <div class="widget-buttons">
                                                <a href="#" data-toggle="config"><i class="fa fa-cog"></i></a>&nbsp;&nbsp;
                                                <a href="javascript:remove_obj('chart_5')" data-toggle="dispose"><i class="fa fa-times"></i></a>&nbsp;&nbsp;
                                            </div></div>
                                        <div id="chart_5" class="div_cls"></div>
                                    </li>
                                    <li style="list-style-type:none;" div_id="chart_6" data-col='1' data-row='2' data-sizex="1" data-sizey="1" >
                                        <div class="widget-header bg-blue"><span class="widget-caption">&nbsp;&nbsp;       12321点对点垃圾短信被举报量指标偏离度</span>
                                            <div class="widget-buttons">
                                                <a href="#" data-toggle="config"><i class="fa fa-cog"></i></a>&nbsp;&nbsp;
                                                <a href="javascript:remove_obj('chart_6')" data-toggle="dispose"><i class="fa fa-times"></i></a>&nbsp;&nbsp;
                                            </div></div>
                                        <div id="chart_6" class="div_cls"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Modal -->
                    <form id="registrationForm1" action="javascript:add_widget();">
                        <div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog"
                             aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="widget-header bg-blue">

                                        <span class="widget-caption">创建配置指标</span>
                                        <div class="widget-buttons" >
                                            <a data-dismiss="modal" aria-hidden="true" onclick="closeChart()"><i class="fa fa-times"></i></a>
                                        </div>
                                    </div>
                                    <div class="modal-body"  style="padding-left: 0px;padding-top: 0px;height:50px">
                                        <!-- 编辑图表DIV -->
                                        <div style="width:600px;">
                                            <div id="simplewizardinwidget" class="wizard" data-target="#simplewizardinwidget-steps">
                                                <ul class="steps">
                                                    <li data-target="#simplewizardinwidgetstep1" class="active"><span class="step">1</span><span class="title">数据指标</span><span class="chevron"></span></li>
                                                    <li data-target="#simplewizardinwidgetstep2"><span class="step">2</span><span class="title">图表形式</span> <span class="chevron"></span></li>
                                                    <li data-target="#simplewizardinwidgetstep3"><span class="step">3</span><span class="title">数据维度</span> <span class="chevron"></span></li>
                                                </ul>

                                            </div>
                                            <div class="step-content" id="simplewizardinwidget-steps">
                                                <div class="step-pane active" id="simplewizardinwidgetstep1">
                                                    <div class="row">
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <label for="exampleInputEmail2">指标分类</label>
                                            <span class="input-icon icon-right">
                                                <select class="form-control" name="country1"
                                                        data-bv-field="country1" id="Select1">
                                                </select>
                                                <i class="form-control-feedback" data-bv-field="country1"
                                                   style="display: none;"></i>
                                            </span>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-6">
                                                            <div class="form-group">
                                                                <label for="exampleInputName2">指标名称</label>
                                                <span class="input-icon icon-right">
                                                    <select class="form-control" name="country" data-bv-field="country" id="Select2"></select>
                                                    <i class="form-control-feedback" data-bv-field="country" style="display: none;"></i>
                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <label for="exampleInputEmail2">名称</label>
                                                <span class="input-icon icon-right">
                                                    <input type="text" class="form-control" name="firstName" id="firstName"
                                                           placeholder="名称"
                                                           data-bv-notempty="true"
                                                           data-bv-notempty-message="必填"/>
                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="step-pane" id="simplewizardinwidgetstep2">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="form-group">
                                                                <div class="control-group">
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input name="form-field-radio" type="radio" class="colored-blue">
                                                        <span class="text"> 饼状图
														<br/>
														<span style="color:gray" >一般展示某一项指标在同一维度下，各维度指标的占比情况。目的旨在展现该项指标出现的分布情况。</span></span>
                                                                        </label>
                                                                    </div>

                                                                    <div class="radio">
                                                                        <label>
                                                                            <input name="form-field-radio" type="radio" class="colored-danger">
                                                        <span class="text"> 横向柱状图
														<br/>
														<span style="color:gray" >一般展示该指标的排行情况。需要选择展现的排行条数，例如TOP5，TOP10，最大只能选10。</span></span>
                                                                        </label>
                                                                    </div>

                                                                    <div class="radio">
                                                                        <label>
                                                                            <input name="form-field-radio" type="radio" class="colored-success">
                                                        <span class="text"> 纵向柱状图（同比）
														<br/>
														<span style="color:gray" >一般展示该指标与前N个周期内，同一时间点的对比情况。</span></span>
                                                                        </label>
                                                                    </div>

                                                                    <div class="radio">
                                                                        <label>
                                                                            <input name="form-field-radio" type="radio" class="colored-blueberry">
                                                        <span class="text">  纵向柱状图（环比）
														<br/>
														<span style="color:gray" >一般展示该指标在同一时段内，与前N个周期的对比情况。</span></span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input name="form-field-radio" type="radio" class="colored-blueberry">
                                                        <span class="text">  线形图
														<br/>
														<span style="color:gray" >一般展示该指标一段时间内的趋势走向。</span></span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input name="form-field-radio" type="radio" class="colored-blueberry">
                                                        <span class="text">  列表
														<br/>
														<span style="color:gray" >展示8条指标详细信息。</span></span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input name="form-field-radio" type="radio" class="colored-blueberry">
                                                        <span class="text">  蛛网图
														<br/>
														<span style="color:gray" >一般用于全局指标的显示，建议多数据项的指标使用。例如：在同一图中同时显示业务支撑部和网络部的不合规数，配置总合规数，合规率的对比。</span></span>
                                                                        </label>
                                                                    </div>
                                                                    <div class="radio">
                                                                        <label>
                                                                            <input name="form-field-radio" type="radio" class="colored-blueberry">
                                                        <span class="text">     数据报表
                                                        <br/>
														<span style="color:gray" >用于展示某一项指标在某一维度的数据汇总分析报表</span></span>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="step-pane" id="simplewizardinwidgetstep3">
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <label for="exampleInputEmail2">数据维度</label>
                                            <span class="input-icon icon-right">
                                                <select class="form-control" name="country1"
                                                        data-bv-field="country1" id="Select3">
                                                    <option>专业</option>
                                                    <option>部门</option>
                                                    <option>地区</option>
                                                    <option>时间</option>
                                                </select>
                                                <i class="form-control-feedback" data-bv-field="country1"
                                                   style="display: none;"></i>
                                            </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <label for="exampleInputEmail2">选择地区</label>
                                        <span class="input-icon icon-right">
                                            <div class="col-lg-4 col-sm-4 col-xs-4">
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" checked="checked">
                                                        <span class="text">哈尔滨</span>
                                                    </label>
                                                </div>
                                            </div>
                                        <div class="col-lg-4 col-sm-4 col-xs-4">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="inverted" checked="checked">
                                                    <span class="text">齐齐哈尔</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-4 col-xs-4">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="colored-success" checked="checked">
                                                    <span class="text">大庆</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-4 col-xs-4">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="colored-success" checked="checked">
                                                    <span class="text">牡丹江</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-4 col-xs-4">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="colored-success" checked="checked">
                                                    <span class="text">佳木斯</span>
                                                </label>
                                            </div>
                                        </div>
                                        </span>

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <label for="exampleInputEmail2">选择展示内容</label>
                                        <span class="input-icon icon-right">
                                            <div class="col-lg-4 col-sm-4 col-xs-4">
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" checked="checked">
                                                        <span class="text">垃圾短信总数</span>
                                                    </label>
                                                </div>
                                            </div>
                                        <div class="col-lg-4 col-sm-4 col-xs-4">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="colored-success" checked="checked">
                                                    <span class="text">每万等效MO垃圾短信数</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-4 col-xs-4">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="colored-success" checked="checked">
                                                    <span class="text">垃圾短信投诉数</span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-sm-4 col-xs-4">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" class="colored-success" checked="checked">
                                                    <span class="text">垃圾短信投诉及时处理数</span>
                                                </label>
                                            </div>
                                        </div>
                                        </span>

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <label for="exampleInputEmail2">选择时间段</label>
                                        <span class="input-icon icon-right">
                                            <div class="col-lg-8 col-sm-8 col-xs-8">
                                                <div class="controls">
                                                    <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-calendar"></i>
                                                    </span><input type="text" class="form-control" id="reservation" />
                                                    </div>
                                                </div>
                                            </div>
                                        </span>

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--<div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group">
                                                                <label for="exampleInputEmail2">Value(y)</label>
                                                                    <span class="input-icon icon-right">
                                                                        <select class="form-control" name="country1"
                                                                                data-bv-field="country1" id="Select4">
                                                                            <option>合规1</option>
                                                                            <option>合规2</option>
                                                                            <option>合规3</option>

                                                                        </select>
                                                                        <i class="form-control-feedback" data-bv-field="country1"
                                                                           style="display: none;"></i>
                                                                    </span>
                                                            </div>
                                                        </div>
                                                    </div>-->
                                                </div>
                                            </div>
                                            <div class="actions actions-footer" id="simplewizardinwidget-actions">
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-default btn-sm btn-prev"> <i class="fa fa-angle-left"></i>上一步</button>
                                                    <button type="button" class="btn btn-default btn-sm btn-next" data-last="完成">下一步<i class="fa fa-angle-right"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <script type="text/javascript">
                    var gridster;
                    var grid_width=$(document).width();
                    var grid_height=$(document).height();
                    var document_sign=1;
                    // $(".page-body").load("center-8.html")
                </script>

                <!--Beyond Scripts  禁止移动-->
                <script src="assets/js/beyond.js"></script>

                <!--gridster Scripts-->
                <!--<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>-->

                <script src="js/highcharts.js" type="text/javascript" charset="utf-8"></script>
                <script src="js/highcharts-more.js"></script>
                <script src="assets/js/validation/bootstrapValidator.js"></script>
                <!--内部引用js-->
                <script src="bocojs/baseGraphicsUtils.js" type="text/javascript" charset="utf-8"></script>

                <script src="bocojs/publicView.js" type="text/javascript" charset="utf-8"></script>
                <script type="text/javascript">

                    $(function () {
                        $('#chart_1').highcharts({
                            chart: {
                                zoomType: 'xy'
                            },
                            title: {
                                text: ''
                            },
                            subtitle: {
                                text: ''
                            },
                            xAxis: [{
                                categories: ['1月', '2月', '3月', '4月', '5月', '6月',
                                    '7月', '8月', '9月', '10月', '11月', '12月'],
                                crosshair: true
                            }],
                            yAxis: [{ // Secondary yAxis
                                title: {
                                    text: '',
                                    style: {
                                        color: Highcharts.getOptions().colors[0]
                                    }
                                },
                                labels: {
                                    format: '{value}% ',
                                    style: {
                                        color: Highcharts.getOptions().colors[0]
                                    }
                                },
                                opposite: true
                            },{ // Primary yAxis
                                labels: {
                                    format: '{value}',
                                    style: {
                                        color: Highcharts.getOptions().colors[1]
                                    }
                                },
                                title: {
                                    text: '单位：条',
                                    style: {
                                        color: Highcharts.getOptions().colors[1]
                                    }
                                }
                            }],
                            tooltip: {
                                shared: true
                            },
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                //x: 50,
                                verticalAlign: 'top',
                                // y: 50,
                                floating: true,
                                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                            },
                            series: [{
                                name: '2015',
                                type: 'column',
                                yAxis: 1,
                                data: [600, 800, 700, 680, 520, 400, 400, 480, 450, 500, 900, 400],
                                tooltip: {
                                    valueSuffix: ' mm'
                                }

                            }, {
                                name: '增长率',
                                type: 'spline',
                                data: [-40, -50, 100, -25, -20, 20, 0, 25, 25, 10, -10,10],
                                tooltip: {
                                    valueSuffix: '°C'
                                }
                            }]
                        });
                        $('#chart_2').highcharts({
                            title: {
                                text: '',
                                x: -20 //center
                            },
                            subtitle: {
                                text: '',
                                x: -20
                            },
                            xAxis: {
                                categories: ['1月', '2月', '3月', '4月', '5月', '6月',
                                    '7月', '8月', '9月', '10月', '11月', '12月']
                            },
                            yAxis: {
                                title: {
                                    text: ''
                                },
                                plotLines: [{
                                    value: 0,
                                    width: 1,
                                    color: '#808080'
                                }]
                            },
                            tooltip: {
                                valueSuffix: '°C'
                            },
                            legend: {
                                layout: 'horizontal',
                                align: 'right',
                                verticalAlign: 'top',
                                borderWidth: 0
                            },
                            series: [{
                                name: '中国移动',
                                data: [40,30, 70, 80, 70, 60, 70, 60, 50, 70, 50, 30]
                            }, {
                                name: '中国联通',
                                data: [70,40, 90, 90, 90, 80, 80, 90, 70, 90, 120, 150]
                            }, {
                                name: '中国电信',
                                data: [80, 50, 150, 160, 140, 150, 240, 230, 220, 240, 210, 170]
                            }]
                        });
                        $('#chart_3').highcharts({
                            chart: {
                                zoomType: 'xy'
                            },
                            title: {
                                text: ''
                            },
                            subtitle: {
                                text: ''
                            },
                            xAxis: [{
                                categories: ['1月', '2月', '3月', '4月', '5月', '6月',
                                    '7月', '8月', '9月', '10月', '11月', '12月'],
                                crosshair: true
                            }],
                            yAxis: [{ // Secondary yAxis
                                title: {
                                    text: '',
                                    style: {
                                        color: Highcharts.getOptions().colors[0]
                                    }
                                },
                                labels: {
                                    format: '{value}% ',
                                    style: {
                                        color: Highcharts.getOptions().colors[0]
                                    }
                                },
                                opposite: true
                            },{ // Primary yAxis
                                labels: {
                                    format: '{value}万',
                                    style: {
                                        color: Highcharts.getOptions().colors[1]
                                    }
                                },
                                title: {
                                    text: '单位：件',
                                    style: {
                                        color: Highcharts.getOptions().colors[1]
                                    }
                                }
                            }],
                            tooltip: {
                                shared: true
                            },
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                //x: 50,
                                verticalAlign: 'top',
                                // y: 50,
                                floating: true,
                                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
                            },
                            series: [{
                                name: '垃圾短彩信指标量',
                                type: 'column',
                                yAxis: 1,
                                data: [13, 7, 12, 12, 10, 11, 10, 8, 7, 8, 9],
                                tooltip: {
                                    valueSuffix: ' mm'
                                }

                            }, {
                                name: '处理及时率',
                                type: 'spline',
                                data: [90, 95, 95,80, 90, 90, 95, 95, 100, 95],
                                tooltip: {
                                    valueSuffix: '°C'
                                }
                            }]
                        });
                        $('#chart_4').highcharts({

                                    chart: {
                                        type: 'gauge',
                                        plotBackgroundColor: null,
                                        plotBackgroundImage: null,
                                        plotBorderWidth: 0,
                                        plotShadow: false
                                    },

                                    title: {
                                        text: '',
                                        align:'left',
                                        verticalAlign:'middle'
                                    },

                                    pane: {
                                        startAngle: -150,
                                        endAngle: 150,
                                        background: [{
                                            backgroundColor: {
                                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                                stops: [
                                                    [0, '#FFF'],
                                                    [1, '#333']
                                                ]
                                            },
                                            borderWidth: 0,
                                            outerRadius: '109%'
                                        }, {
                                            backgroundColor: {
                                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                                stops: [
                                                    [0, '#333'],
                                                    [1, '#FFF']
                                                ]
                                            },
                                            borderWidth: 1,
                                            outerRadius: '107%'
                                        }, {
                                            // default background
                                        }, {
                                            backgroundColor: '#DDD',
                                            borderWidth: 0,
                                            outerRadius: '105%',
                                            innerRadius: '103%'
                                        }]
                                    },

                                    // the value axis
                                    yAxis: {
                                        min: 0,
                                        max: 31,

                                        minorTickInterval: 'auto',
                                        minorTickWidth: 1,
                                        minorTickLength: 10,
                                        minorTickPosition: 'inside',
                                        minorTickColor: '#666',

                                        tickPixelInterval: 30,
                                        tickWidth: 2,
                                        tickPosition: 'inside',
                                        tickLength: 10,
                                        tickColor: '#666',
                                        labels: {
                                            step: 2,
                                            rotation: 'auto'
                                        },
                                        title: {
                                            text: ''
                                        },
                                        plotBands: [{
                                            from: 0,
                                            to: 5,
                                            color: '#55BF3B' // green
                                        }, {
                                            from: 5,
                                            to: 12,
                                            color: '#DDDF0D' // yellow
                                        }, {
                                            from: 12,
                                            to: 24,
                                            color: 'blue' // red
                                        }, {
                                            from: 24,
                                            to: 31,
                                            color: '#DF5353' // red
                                        }]
                                    },

                                    series: [{
                                        name: 'Speed',
                                        data: [8],
                                        tooltip: {
                                            valueSuffix: ' '
                                        }
                                    }]

                                },
                                // Add some life
                                function (chart) {
//                        if (!chart.renderer.forExport) {
//                            setInterval(function () {
//                                var point = chart.series[0].points[0],
//                                        newVal,
//                                        inc = Math.round((Math.random() - 0.5) * 20);
//
//                                newVal = point.y + inc;
//                                if (newVal < 0 || newVal > 200) {
//                                    newVal = point.y - inc;
//                                }
//
//                                point.update(newVal);
//
//                            }, 3000);
//                        }
                                });
                        $('#chart_5').highcharts({
                            title: {
                                text: '',
                                x: -20//center
                            },
                            xAxis: {
                                categories:  ['1月', '2月', '3月', '4月', '5月', '6月',
                                    '7月', '8月', '9月', '10月', '11月', '12月']
                            },
                            yAxis: {
                                title: {
                                    text: ''
                                },
                                plotLines: [{
                                    value: 0,
                                    width: 1,
                                    color: '#808080'
                                }]
                            },
                            tooltip: {
                                valueSuffix: '个'
                            },
                            legend: {
                                layout: 'vertical',
                                align: 'right',
                                verticalAlign: 'middle',
                                borderWidth: 0,
                                enabled:false
                            },
                            series: [{
                                name: '集团考核指标',
                                data: [1579,1687,1464,1464,1579,1687,1464,1464,1687,1464,1464,1579]
                            },{
                                name: '指标偏离度',
                                data: [100,356,200,150,70,95,168,88,167,90,142,137]
                            }]
                        });
                        $('#chart_6').highcharts({
                            title: {
                                text: '',
                                x: -20//center
                            },
                            xAxis: {
                                categories:  ['1月', '2月', '3月', '4月', '5月', '6月',
                                    '7月', '8月', '9月', '10月', '11月', '12月']
                            },
                            yAxis: {
                                title: {
                                    text: ''
                                },
                                plotLines: [{
                                    value: 0,
                                    width: 1,
                                    color: '#808080'
                                }]
                            },
                            tooltip: {
                                valueSuffix: '个'
                            },
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom',
                                borderWidth: 0,
                                enabled:false
                            },
                            series: [{
                                name: '集团考核指标',
                                data: [532,644,791,568,943,564,721,648,813,764,497,489]
                            },{
                                name: '指标偏离度',
                                data: [100,356,200,150,70,95,168,88,167,90,142,137]
                            }]
                        });
                    });
                </script>
</body>
</html>
